<template>
  <el-main>
    <el-row>
    <el-col :span=20>
      <el-row style="text-align: left;margin-left:7%;font-size: small">
        <el-select v-model="monthdata" placeholder="请选择月份" size="small" :popper-append-to-body="false" @change="monthdatachange">
          <el-option
            v-for="item in monthname"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      <el-date-picker
        v-model="yeardata"
        type="year"
        size="small"
        :picker-options="pickerOptionStart"
        backgroundColor="#061F33"
        value-format="yyyy"
        @change="yeardateselect"
        format="yyyy年"
        placeholder="请选择查询年份"
        popper-class="faultyearStyle">
      </el-date-picker>
        <el-button @click="setdate" :class="setdatestyle">至今</el-button>
        <el-button @click="searchdata"  style="color:rgb(6,203,255);height: 33px;width:7%;border:2px solid #1c5b7c !important;margin-top: 2%;margin-left:2%;padding-top: 0.6%;">查询</el-button>
      </el-row>
      <el-row>
        <v-chart  ref="myChart" :options="BarData"  class="chart.section" :style="{width:'100%',height:'580px'}" />
      </el-row>
    </el-col>
    <el-col :span=4>
      <el-radio-group v-model="radio1"  @change="handleChange" fill="#053356">
        <el-radio-button  label='阀控故障' style="margin-top:47%;margin-bottom:7%">阀控故障</el-radio-button>
        <el-radio-button  label='阀跳闸次数' style="margin-top:7%;margin-bottom:7%;" >阀跳闸次数</el-radio-button>
        <el-radio-button  label='阀晶闸管故障' style="margin-top:7%;margin-bottom:7%;">阀晶闸管故障</el-radio-button>
        <el-radio-button  label='阀BOD故障' style="margin-top:7%;margin-bottom:7%;">阀BOD故障</el-radio-button>
        <el-radio-button  label='阀漏水告警' style="margin-top:7%;margin-bottom:7%;">阀漏水告警</el-radio-button>
        <el-radio-button  label='阀避雷器告警' style="margin-top:7%;margin-bottom:7%;">阀避雷器告警</el-radio-button>
        <el-radio-button  label='其他故障' style="margin-top:7%;margin-bottom:7%;">其他故障</el-radio-button>

      </el-radio-group>
    </el-col>
    </el-row>

  </el-main>
</template>

<script>
import { getfaultCount } from '@/api/maintenance'
export default {
  name: "Faultstatistic",
  data(){
    return{
      dialogopen:false,
      title:'',
      pictitle:'',
      selectvalvedatalabel:[],
      selectvalveshowdata:[],
      formlabelcopy:[],
      radio1:'阀控故障',
      yeardata:'',
      monthdata:'',
      transmitid:'',
      originaldata:'',
      formlongtime:'',
      setdatestyle:'beforebuttonstyle',
      pickerOptionStart:{
        disabledDate: (time)=>{
          return time.getTime() > Date.now()
        }
      },

      form:{
        label:'',
        valvehallId:1,
        faulttypeId:0,
        time:'',
      },
      valvelabel:['D1阀','Y1阀','D2阀','Y2阀','D3阀','Y3阀','D4阀','Y4阀','D5阀','Y5阀','D6阀','Y6阀'],
      valvelabel6:['D1阀','Y1阀','D2阀','Y2阀','D3阀','Y3阀'],

      testfaultlabel:['阀跳闸次数', '阀晶闸管故障', '阀BOD故障','阀漏水告警','阀避雷器告警','其他故障','阀控故障'],
      testvalvelabel:['D1阀','Y1阀','D2阀','Y2阀','D3阀','Y3阀','D4阀','Y4阀','D5阀','Y5阀','D6阀','Y6阀'],
      valveldatasearch:['D1','Y1','D2','Y2','D3','Y3','D4','Y4','D5','Y5','D6','Y6'],
      valveldatasearch6:['VAD','VAY','VBD','VBY','VCD','VCY'],
      otherfaultlabel:['阀TCE故障','阀阻尼电容故障','阀均压电阻故障','阀电抗器故障','光纤故障','电极状态/内冷水质','阀控板卡','晶闸管'],
      monthname:[{value:'', label:'年统计'}, {value:'01', label:'1月'}, {value:'02', label:'2月'}, {value:'03', label:'3月'},{value:'04', label:'4月'}, {value:'05', label:'5月'}, {value:'06', label:'6月'}, {value:'07', label:'7月'}, {value:'08', label:'8月'}, {value:'09', label:'9月'}, {value:'10', label:'10月'}, {value:'11', label:'11月'}, {value:'12', label:'12月'},],

      barseriesdata1:[
        {
          name: '阀跳闸次数',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '阀晶闸管故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '阀BOD故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '阀漏水告警',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '阀避雷器告警',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '其他故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
        {
          name: '阀控故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0]
        },
      ],

      barseriesdata2:[{
        name: 'D1阀',
        type: 'bar',
        stack: 'total',
        barWidth: '20%',
        data: [0,0,0,0,0,0,0,0,0,0,0,0]
      },
        {
          name: 'Y1阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'D2阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'Y2阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'D3阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'Y3阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'D4阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'Y4阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'D5阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'Y5阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'D6阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },{
          name: 'Y6阀',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },],


      barseriesdata3:[{
        name: '阀TCE故障',
        type: 'bar',
        stack: 'Total',
        barWidth: '20%',
        data: [0,0,0,0,0,0,0,0]
      },
        {
          name: '阀阻尼电容故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '阀均压电阻故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '阀电抗器故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '光纤故障',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '电极状态/内冷水质',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '阀控板卡',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
        {
          name: '晶闸管',
          type: 'bar',
          stack: 'Total',
          barWidth: '20%',
          data: [0,0,0,0,0,0,0,0]
        },
      ],

      barseriesdata4:[{
        name: 'VAD',
        type: 'bar',
        stack: 'total',
        barWidth: '20%',
        data: [0,0,0,0,0,0]
      },
        {
          name: 'VAY',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0]
        },
        {
          name: 'VBD',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0]
        },
        {
          name: 'VBY',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0]
        },
        {
          name: 'VCD',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0]
        },
        {
          name: 'VCY',
          type: 'bar',
          stack: 'total',
          barWidth: '20%',
          data: [0,0,0,0,0,0]
        },
      ],


      BarData: {
        backgroundcolor: '#061F33',
        // title: {
        //   text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'item'
        },
        color: ['#48E5EE'],
        //调整图例样式
        legend: {
          textStyle: {
            color: '#ffffff',
          },
          lineStyle: {
            // color:'#F6E404',
            //#F54D04
          },
          //图例图型
          icon: 'circle',
          //图例大小和间距
          // itemWidth: 50,
          // itemHeight: 2,
          // itemGap: 50,
          //align: 'right',
          //图例位置
          //x: 'right',
          //y: 'bottom',
          data: []
        },
        //调整表格距离周围的宽度
        grid: {
          show:true,
          left: '7%',
          right: '3.5%',
          bottom: '0',
          top: '5%',
          containLabel: true
        },

        xAxis: {
          //显示栅格
          splitLine: {
            show: 'true',
            lineStyle: {
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            show: 'true',
            lineStyle: {
              color: 'rgb(151,171,211)'
            },
          },
          axisLabel: {
            show: 'true',
            textStyle: {color: '#ffffff'},
          },
          type: 'category',
          // boundaryGap: false,
          data: []
        },


        yAxis: {
          splitLine: {
            show: 'true',
            lineStyle: {
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: 'true',
            textStyle: {color: '#ffffff'},
          },
          axisLine: {
            show: 'true',
            lineStyle: {
              color: 'rgb(151,171,211)'
            },
          },
          type: 'value',
         /* min: '0',
          max: '100',*/
          splitNumber: '5',

        },


        series: []
      },
      params:
    {
        id: ''
      },
    }
  },
  created(){
    this.initchartdata()
  },

watch:{
  '$route.params': {
    handler(new_value, old_value) {
      this.transmitid = this.$route.params.id
      this.form.valvehallId = this.transmitid
      // 台账
    }
  },

},

  methods:{
    //获取12个阀数据
    getfaultstadata(){
      if(this.yeardata===null){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })
        console.log('错误数据BarData',this.BarData.series)
      }
      else if(this.formlongtime===''&&this.yeardata===''){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })
      }
      else {
        getfaultCount(this.form).then(response => {
          console.log('getfaultCount', response)
          this.originaldata = response.data
          console.log('form', this.form)
          for (const valcount1 in this.valveldatasearch)
            this.BarData.series[valcount1].data[valcount1] = this.originaldata[this.valveldatasearch[valcount1]]
          console.log('BarData.series', this.BarData.series)
          this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        })
      }
    },



    //获取阀故障数据
    getfaultstadata0(){
      if(this.yeardata===null){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })
      }
      else if(this.formlongtime===''&&this.yeardata===''){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })
      }
      else {
        getfaultCount(this.form).then(response => {
          console.log('getfaultCount', response)
          this.originaldata = response.data
          console.log('form', this.form)
          this.BarData.series[0].data[0] = this.originaldata['1']
          this.BarData.series[1].data[1] = this.originaldata['2']
          this.BarData.series[2].data[2] = this.originaldata['3']
          this.BarData.series[3].data[3] = this.originaldata['4']
          this.BarData.series[4].data[4] = this.originaldata['5']
          this.BarData.series[5].data[5] = this.originaldata['0']
          this.BarData.series[6].data[6] = this.originaldata['6']
          console.log('BarData.series', this.BarData.series)
          this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        })
      }
    },

    //获取其他故障数据
    getfaultstadata1(){
      if(this.yeardata===null){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })

      }
      else if(this.formlongtime===''&&this.yeardata===''){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })

      }
      else {
        getfaultCount(this.form).then(response => {
          console.log('getfaultCount', response)
          this.originaldata = response.data
          console.log('form', this.form)
          this.BarData.series[0].data[0] = this.originaldata['1']
          this.BarData.series[1].data[1] = this.originaldata['2']
          this.BarData.series[2].data[2] = this.originaldata['3']
          this.BarData.series[3].data[3] = this.originaldata['4']
          this.BarData.series[4].data[4] = this.originaldata['5']
          this.BarData.series[5].data[5] = this.originaldata['6']
          this.BarData.series[6].data[6] = this.originaldata['7']
          this.BarData.series[7].data[7] = this.originaldata['8']
          console.log('BarData.series', this.BarData.series)
          this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        })
      }
    },


    //获取6阀数据
    getfaultstadata2(){
      this.BarData.series=[]
      this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
      if(this.yeardata===null){
        this.$message({
          message: '请选择年份',
          type: 'success'
        })

      }
      else if(this.formlongtime===''&&this.yeardata===''){
        this.BarData.series=[]
        this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        this.$message({
          message: '请选择年份',
          type: 'success'
        })
      }
      else {
        getfaultCount(this.form).then(response => {
          console.log('getfaultCount', response)
          this.originaldata = response.data
          console.log('form', this.form)
          for (const valcount2 in this.valveldatasearch6)
            this.BarData.series[valcount2].data[valcount2] = this.originaldata[this.valveldatasearch6[valcount2]]
          console.log('BarData.series', this.BarData.series)
          this.$refs.myChart && this.$refs.myChart.mergeOptions(this.BarData, true)
        })
      }
    },







    //选择阀
    selectvalve(pictitle){
      this.formlabelcopy=this.form.label;
      this.form.label=pictitle;
      this.BarData.xAxis.data=this.testvalvelabel;
      this.BarData.legend.data=this.testvalvelabel;
      this.form.time=this.formlongtime+this.yeardata+this.monthdata;
      this.BarData.series=[];
      for(const k in this.barseriesdata2){
        this.BarData.series[k]=this.barseriesdata2[k]
      }
      this.getfaultstadata();

    },

    selectvalve0(pictitle){
      this.form.label=pictitle;
      this.BarData.legend.data=[];
      this.BarData.xAxis.data=this.testfaultlabel;
      this.form.time=this.formlongtime+this.yeardata+this.monthdata;
      this.BarData.series=[];
      for(const k0 in this.barseriesdata1){
        this.BarData.series[k0]=this.barseriesdata1[k0]
      }
      this.getfaultstadata0();
    },

    selectvalve1(pictitle){
      this.BarData.xAxis.data=this.otherfaultlabel;
      // this.BarData.series[0].name=this.barseriesdata3[0].name;
      // this.BarData.series[0].data=this.barseriesdata3[0].data;
      this.form.label=pictitle;
      this.BarData.legend.data=[];
      this.form.time=this.formlongtime+this.yeardata+this.monthdata;
      this.BarData.series=[];
      for(const k1 in this.barseriesdata3){
        this.BarData.series[k1]=this.barseriesdata3[k1]
      }
      this.getfaultstadata1();

    },

    selectvalve2(pictitle){
      this.formlabelcopy=this.form.label;
      this.form.label=pictitle;
      this.BarData.xAxis.data=this.valveldatasearch6;
      this.form.time=this.formlongtime+this.yeardata+this.monthdata;
      this.BarData.legend.data=this.valveldatasearch6;
      this.BarData.series=[];
      for(const k2 in this.barseriesdata4){
        this.BarData.series[k2]=this.barseriesdata4[k2]
      }
      this.getfaultstadata2();
    },


    handleChange(index){
      console.log(index)
      switch (index) {
        case "阀控故障":
          this.form.faulttypeId=6;
          this.selectvalve0('阀控故障');
          break;
        case "阀跳闸次数":
          this.form.faulttypeId=1;
          this.selectvalve('阀跳闸次数');
          break;
        case "阀晶闸管故障":
          this.form.faulttypeId=2;
          this.selectvalve('阀晶闸管故障');
          break;
        case "阀BOD故障":
          this.form.faulttypeId=3;
          this.selectvalve('阀BOD故障');
          break;
        case "阀漏水告警":
          this.form.faulttypeId=4;
          this.selectvalve2('阀漏水告警');
          break;
        case "阀避雷器告警":
          this.form.faulttypeId=5;
          this.selectvalve2('阀避雷器告警');
          break;
        case "其他故障":
          this.form.faulttypeId=0;
          this.selectvalve1('其他故障');
          break;
      }
    },

    //至今查询按钮
    setdate(){
      this.formlongtime='至今';
      this.yeardata='';
      this.monthdata='';
      this.setdatestyle='afterbuttonstyle';
    },

    yeardateselect(){
      this.setdatestyle='beforebuttonstyle'
      this.formlongtime=''
    },

    monthdatachange(){
      this.setdatestyle='beforebuttonstyle'
      this.formlongtime=''
    },


    searchdata(){
      /*this.getfaultstadata();*/
      this.handleChange(this.form.label)
    },

    /*初始化数据*/
    initchartdata(){
      var date=new Date()
      /*this.formlongtime=date.getFullYear()*/
      this.yeardata=date.getFullYear()+''
      this.form.faulttypeId=6
      this.selectvalve0("阀控故障")
    }
  }
}







</script>
<style lang="scss">
.faultyearStyle{
  .el-date-picker__header {
    margin-top: 0;
  }

  .el-date-picker__header-label{
    color:#FFFFFF;
  }

  .el-icon-d-arrow-right:before{
    color:#FFFFFF;
  }

  .el-icon-d-arrow-left:before{
    color:#FFFFFF;
  }
  .el-year-table td .cell{
    color: #FFFFFF;
  }
  .el-picker-panel__body{
    background-color: #061F33;
    border: 0;
  }
  .el-year-table td.disabled .cell{
    background-color: #061F33;
    color: #6c6e73;
  }
}



/*.buttonselct.el-radio-button__inner{*/
/*  border: 0;*/
/*  color:rgb(6,203,255);*/
/*  width:70%;*/
/*  margin-top:9%;*/
/*  margin-bottom:8%;*/
/*  background-color: #053356;*/
/*}*/



</style>
<style lang="scss" scoped>

::v-deep .el-select-dropdown {
    background-color: #061F33;
    color: #FFFFFF;
  }



/*修改el-radio-group位置*/
.el-radio-button{
  border: 0;
  width:70%;
  background-color: #053356;
}

/*修改el-radio-button点击后的样式*/
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color: #FFFFFF;
  width:100%;
  background-color: #053356;
  border: 2px solid rgb(6,203,255) !important;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner{
  border-left: 2px solid #053356;
}

/*修改el-radio-button未点击的样式*/
::v-deep .el-radio-button__inner{
  color:rgb(6,203,255);
  width:100%;
  background-color: #053356;
  border:2px solid #053356;
}

/*按钮悬浮样式*/
.el-button:hover{
  color: #FFFFFF !important;
  border: 2px solid #1c5b7c !important;
}

/*按钮选中还未松开样式*/
.el-button:active{
  color: #FFFFFF !important;
  border: 2px solid #1c5b7c !important;
}

/*按钮选中后样式*/
/*.el-button:focus{*/
/*  color: #FFFFFF !important;*/
/*  border: 2px solid #1c5b7c !important;*/
/*}*/
.beforebuttonstyle{
  color:rgb(6,203,255);
  height: 33px;
  width:5%;
  border:2px solid #053356;
  margin-top: 2%;
  margin-left:0;
  padding-top: 0.6%;
  padding-left: 1.3%;
}

.afterbuttonstyle{
  color:#FFFFFF;
  height: 33px;
  width:5%;
  border:2px solid #1c5b7c !important;
  margin-top: 2%;
  margin-left:0;
  padding-top: 0.6%;
  padding-left: 1.3%;
}






/*调整文字与图标间距*/
::v-deep .el-checkbox__input{
  margin-left: 33px;
}

/*调整日期选择框样式*/
::v-deep .el-input__inner{
  background-color: #061F33;
  color:#FFFFFF;
  border: 2px solid #243c78;
}

/*调整选中阀后的文字颜色*/
::v-deep .el-checkbox__label{
  color: #FFFFFF !important;
}

/*调整el-checkbox选中框背景色*/
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #00BCD4;
}

/*el-select下拉框背景颜色调整*/
::v-deep .el-select-dropdown{
  background-color: #061F33;
}

/*el-select下拉框字体颜色调整*/
.el-select-dropdown__item{
  color: #FFFFFF;
}

/*.el-select-dropdown__item:hover{*/
/*  background-color: #1e6abc;*/
/*}*/

.el-select-dropdown__item.hover{
  background-color: #1e6abc;
}

::v-deep .el-picker-panel__body{
  background-color: #061F33;
  color: #FFFFFF;
}


</style>
